<!--文本插值
<template>
  <span>Message: {{ msg }}</span>
</template>
<script>
export default {
  data() {
    return {
      msg: "Hello world!",
    };
  },
};
</script>-->

<!--原始 HTML
<template>
  <p>Using text interpolation: {{ rawHtml }}</p>
  <p>Using v-html directive: <span v-html="rawHtml"></span></p>
</template>
<script>
export default {
  data() {
    return {
      rawHtml: '<span style="color: red">This should be red.</span>',
    };
  },
};
</script>
-->

<!--Attribute 绑定
<template>
  <div v-bind:id="dynamicId">dynamicId</div>
</template>
<script>
export default {
  data() {
    return {
      dynamicId: 'myId',
    };
  },
};
</script>
<style scoped>
  #myId{
    background-color:cadetblue;
  }
</style>
-->

<!--使用 JavaScript 表达式
<template>
  <div>{{ number + 1 }}</div>
</template>
<script>
export default {
  data() {
    return {
      number: 0,
    };
  },
};
</script>
-->

<!--指令 Directives-->
<template>
  <p v-if="seen">Now you see me</p>
</template>
<script>
export default {
  data() {
    return {
      seen: true,
    };
  },
};
</script>
